<template>
  <div class="public-box">
    <div class="riskChek">
      <el-form ref="form" :model="form" label-width="0px">
        <!-- <div v-for="(item,idx) in options" class="class_item">
          <el-checkbox-group v-model='item.classA[1]' @change="changeA(idx)"  v-if="item.classA">
            <el-checkbox v-for="item in item.classA[0]" :label="item" :key="item">{{item}}</el-checkbox>
            </el-checkbox-group>
          <div class="class_item_a" v-if="item.classB">
            <el-checkbox-group v-model="item.classB[1]" @change="changeB">
              <el-checkbox  v-for="item in item.classB[0]" :label="item" :key="item">{{item}}</el-checkbox>
              </el-checkbox-group>
            <div class="class_item_b"  v-if="item.classC">
              <el-checkbox-group v-model="item.classC[1]" @change="changeC">
                <el-checkbox  v-for="item in item.classC[0]" :label="item" :key="item">{{item}}</el-checkbox>
                </el-checkbox-group>
            </div>
          </div>
        </div> -->
        <div v-for="(item,idx) in options" class="class_item" :key="idx">
          <!-- <el-checkbox v-model="item.sel" @change="changeSel(item.sel,idx,null,null)" class="right">全选</el-checkbox> -->
          <el-checkbox-group v-model='item.values[1]' v-if="item.values">
            <el-checkbox v-for="item in item.values[0]" :label="item" :key="item">{{item}}</el-checkbox>
          </el-checkbox-group>
          <div class="class_item_a" v-if="item.classB" v-for="(itemB,idxB) in item.classB" :key="idxB">
            
            <el-checkbox v-if="itemB.classC" v-model="itemB.sel" @change="changeSel(item.sel,idx,itemB.sel,idxB)" class="right">全选</el-checkbox>
            <el-checkbox-group :class="names=='经营风险'?'w100':''" v-model="itemB.values[1]">
              <el-checkbox  @change="selChange(idx,idxB,'classB')"  v-for="item in itemB.values[0]" :label="item" :key="item">{{item}}</el-checkbox>
            </el-checkbox-group>
            <div class="class_item_b"  v-if="itemB.classC">
              <!-- {{itemB.classC}} -->
              <el-checkbox-group v-model="itemB.classC[1]">
                <el-checkbox  @change="selChange(idx,idxB,'classC')"  v-for="item in itemB.classC[0]" :label="item" :key="item">{{item}}</el-checkbox>
              </el-checkbox-group>
              <el-input
                class="input-new-label"
                v-if="itemB.add"
                v-model="inputValue"
                :ref="'saveTagInput'+idx+'_'+idxB"
                size="small"
                style="width:100px"
                @keyup.enter.native="handleInputConfirm(item.sel,idx,itemB.sel,idxB)"
                @blur="handleInputConfirm(item.sel,idx,itemB.sel,idxB)"
              >
              </el-input>
              <el-button v-else class="button-new-label" size="small" @click="showInput(item.sel,idx,itemB.sel,idxB)">+ 新增</el-button>
            </div>
          </div>
        </div>
        <div class="class_item zhaopin" v-if="names=='传播风险'">
          <p><strong>招聘职位类型</strong></p>
          <p><strong>理财经理：</strong>学历要求：不限、初中及以下、高中、大专 最低薪资 : 10000</p>
          <p><strong>销售经理：</strong>学历要求：不限、初中及以下、高中 最低薪资 : 8000</p>
        </div>
      </el-form>
    </div>
    
  </div>
</template>
<script>
  export default {
    props: ['datas', 'names'],
    data() {
      return {
        inputValue: '',
        form: {},
        options: [
          // {
          //   values: [['经营异常', '抵押担保风险'], []],
          //   sel: false
          // },
          // {
          //   values: [['财务风险'], []],
          //   sel: false,
          //   classB: [
          //     {
          //       sel: false,
          //       values: [['主营业务利润率', '经营现金流'], []]
          //     }
          //   ]
          // },
          // {
          //   values: [['舆情风险'], []],
          //   sel: false,
          //   classB: [
          //     {
          //       sel: false,
          //       add: false,
          //       values: [['一级关联词'], []],
          //       classC: [['理财', '区块链'], []]
          //     },
          //     {
          //       sel: false,
          //       add: false,
          //       values: [['二级关联词'], []],
          //       classC: [['涉嫌', '调查'], []]
          //     }
          //   ]
          // }
        ]
      }
    },
    methods: {
      showInput(val, idx, valB, idxB) {
        this.options[idx].classB[idxB].add = true
        this.$nextTick(_ => {
          let saveTagInput = 'saveTagInput' + idx + '_' + idxB
          this.$refs[saveTagInput][0].$refs.input.focus()
        })
      },
      handleInputConfirm(val, idx, valB, idxB) {
        let inputValue = this.inputValue
        if (inputValue) {
          this.options[idx].classB[idxB].classC[0].push(inputValue)
        }
        this.options[idx].classB[idxB].add = false
        this.inputValue = ''
      },
      selChange(idx, idxB, where) {
        if (idxB != null) {
          let op = this.options[idx]
          let classB = op.classB
          // 因为注掉了联动，所以此变量也需要注掉
          // let arrB = 0
          // if (where === 'classC') {
          //   if (classB[idxB].values[1].length === classB[idxB].values[0].length && classB[idxB].classC[1].length === classB[idxB].classC[0].length) {
          //     classB[idxB].sel = true
          //   } else {
          //     classB[idxB].sel = false
          //   }
          // }
          if (classB[idxB].classC) {
            if (classB[idxB].values[1].length === classB[idxB].values[0].length && classB[idxB].classC[1].length === classB[idxB].classC[0].length) {
              classB[idxB].sel = true
            } else {
              classB[idxB].sel = false
            }
          } else if (classB) {
            // console.log(classB[idxB].sel)
            // console.log(classB[idxB].values[0].length)
            // if (classB[idxB].values[1].length === classB[idxB].values[0].length) {
            //   op.sel = true
            // } else {
            //   op.sel = false
            // }
          }
        }
        // 以下代码为三级联动一级和二级，暂时不用，勿删
        // if (idxB != null) {
        //   let op = this.options[idx]
        //   let classB = op.classB
        //   let arrB = 0
        //   if (where === 'classC') {
        //     classB[idxB].values[1] = classB[idxB].classC[1].length > 0 ? classB[idxB].values[0] : []
        //   }
        //   for (let i = 0; i < classB.length; i++) {
        //     arrB += classB[i].values[1].length
        //   }
        //   op.values[1] = arrB > 0 ? op.values[0] : []
        // }
      },
      changeSel(val, idx, valB, idxB) {
        const classB = this.options[idx].classB
        if (idxB != null) {
          classB[idxB].classC[1] = valB ? classB[idxB].classC[0] : []
          classB[idxB].values[1] = valB ? classB[idxB].values[0] : []
        } else {
          this.options[idx].values[1] = val ? this.options[idx].values[0] : []
          if (classB) {
            for (let i = 0; i < classB.length; i++) {
              classB[i].values[1] = val ? classB[i].values[0] : []
              if (classB[i].classC) {
                classB[i].classC[1] = val ? classB[i].classC[0] : []
                classB[i].sel = val
              }
            }
          }
        }
      },
      changeA(idx) {
        if (this.checkAall) {
          console.log('选择下方整体')
        }
      },
      changeB() {
        console.log('b')
      },
      changeC() {
        console.log('c')
      },
      onSubmit() {
        console.log('submit!')
      }
    },
    watch: {
      datas(val) {
        this.options = this.datas
      }
    },
    mounted() {
      this.options = ''
    }
  }
</script>
<style scoped lang='scss'>
.riskTitle {
  font-weight: bold;
  color: black;
}
.el-checkbox-group{
  .el-checkbox{
    display:inline-block;
    width:20%;
  }
  &.w100{
    .el-checkbox{
      display:inline-block;
      width:100%;
    }
  }
}
.class_item{
  background:#fff;
  position: relative;
  .class_item_a{
    position: relative;
    background:#ffffff;
    margin-left:50px;
    .class_item_b{
      position: relative;
      margin-left:50px;
      background:#f2f6fb;
      .button-new-label,.input-new-label{
        margin-left:35px;
        margin-bottom: 20px;
      }
    }
  }
  .right{
    position: absolute;
    top:20px;
    right:20px;
  }
  &.zhaopin{
    margin-left:35px;
    color:#333;
    background:#f5f5f5;
    padding:15px;
    line-height:30px;
    strong{
      font-weight:700
    }
  }
}

.riskChek-chi {
  position: relative;
  .addTo {
    width: 46px;
    height: 22px;
    line-height: 22px;
    text-align: center;
    background-color: #ecf4fd;
    border-radius: 3px;
    border: solid 1px #9dc5fd;
    color: #3197ff;
    cursor: pointer;
    font-size: 17px;
    font-weight: bolder;
    position: relative;
  }
  .addTo2 {
    position: absolute;
    left: 200px;
    bottom: 0;
  }

}
</style>



// WEBPACK FOOTER //
// src/view/sysManage/earlySettingTab/publicSentimentRisk.vue